<template>
  <div class="ansible-audit-container">
    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-folder"></i>
              GitLab项目管理
            </h1>
            <p class="page-subtitle">管理GitLab项目和代码仓库</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ repos.length || 0 }}</div>
              <div class="stat-label">项目总数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ repos.filter(p => p.visibility === 'public').length || 0 }}</div>
              <div class="stat-label">公开项目</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ repos.filter(p => p.last_activity_at).length || 0 }}</div>
              <div class="stat-label">活跃项目</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工具栏：操作按钮 + 搜索过滤 -->
      <div class="search-filters glass-effect">
        <div class="toolbar-left">
          <el-button type="primary" @click="refreshProjects" class="glass-button refresh-button" :loading="loading">
            <i class="fa fa-download"></i>
            刷新项目
          </el-button>
          <el-button @click="syncProjects" class="glass-button sync-button" :loading="syncing">
            <i class="fa fa-plus"></i>
            创建项目
          </el-button>
          <el-button @click="exportProjects" class="glass-button import-button">
            <i class="fa fa-download"></i>
            导出项目
          </el-button>
        </div>

        <div class="toolbar-right">
          <div class="search-group">
            <input
              v-model="searchText"
              type="text"
              class="glass-input"
              placeholder="搜索项目名称或路径..."
            />
          </div>

          <div class="filter-group">
            <el-select v-model="selectedProject" class="glass-select" placeholder="所有项目">
              <el-option value="" label="所有项目" />
              <el-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name" />
            </el-select>
          </div>

          <div class="filter-group">
            <el-select v-model="selectedEnvironment" class="glass-select" placeholder="所有环境">
              <el-option value="" label="所有环境" />
              <el-option v-for="env in environments" :key="env.id" :value="env.id" :label="env.name" />
            </el-select>
          </div>

          <div class="filter-group">
            <el-select v-model="selectedServer" class="glass-select" placeholder="所有服务器">
              <el-option value="" label="所有服务器" />
              <el-option v-for="server in gitlabServers" :key="server.id" :value="server.id" :label="server.name" />
            </el-select>
          </div>
        </div>
      </div>

      <!-- GitLab项目列表 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-folder"></i>
          GitLab项目列表
        </div>

        <el-table
          :data="filteredRepos"
          style="width: 100%"
          v-loading="loading"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="name" label="项目名称" min-width="180">
            <template #default="scope">
              <div class="config-name">
                <i class="fa fa-folder"></i>
                {{ scope.row.name }}
                <el-tag v-if="scope.row.visibility === 'public'" type="success" size="small" style="margin-left: 8px;">公开</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="path" label="项目路径" min-width="180" />

          <el-table-column prop="project" label="所属项目" width="130">
            <template #default="scope">
              <span class="time-text">{{ scope.row.project_name || '未分配' }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="environment" label="环境" width="110">
            <template #default="scope">
              <el-tag
                v-if="scope.row.environment_name"
                :type="getEnvTypeByName(scope.row.environment_name)"
                size="small"
              >
                {{ scope.row.environment_name }}
              </el-tag>
              <span v-else class="time-text">未分配</span>
            </template>
          </el-table-column>

          <el-table-column prop="gitlab_server" label="GitLab服务器" width="110">
            <template #default="scope">
              <span class="time-text">{{ scope.row.gitlab_server_name || scope.row.gitlab_server?.name }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="default_branch" label="默认分支" width="90">
            <template #default="scope">
              <span class="time-text">{{ scope.row.default_branch || 'main' }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="updated_at" label="最后更新" width="130">
            <template #default="scope">
              <span class="time-text">{{ formatTime(scope.row.updated_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="480" :show-overflow-tooltip="false">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" @click="viewRepository(scope.row)" class="glass-button add-button">
                  <i class="fa fa-external-link"></i>
                  仓库
                </el-button>
                <el-button size="small" @click="showRepoUrls(scope.row)" class="glass-button import-button">
                  <i class="fa fa-copy"></i>
                  地址
                </el-button>
                <el-button size="small" @click="showBranchesAndTags(scope.row)" class="glass-button sync-button">
                  <i class="fa fa-code-fork"></i>
                  分支/标签
                </el-button>
                <el-button size="small" @click="editProject(scope.row)" class="glass-button refresh-button">
                  <i class="fa fa-edit"></i>
                  编辑
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 创建/编辑项目模态框 -->
    <div v-if="modalVisible" class="modal-overlay" @click="closeModal">
      <div class="modal-content glass-container" @click.stop>
        <div class="modal-header">
          <h3>{{ isEdit ? '编辑' : '创建' }}项目</h3>
          <button class="close-btn" @click="closeModal">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <form @submit.prevent="saveProject" class="project-form">
          <div class="form-group">
            <label>项目名称</label>
            <input
              v-model="form.name"
              type="text"
              class="glass-input"
              placeholder="请输入项目名称"
              required
            />
          </div>

          <div class="form-group">
            <label>项目描述</label>
            <textarea
              v-model="form.description"
              class="glass-input"
              placeholder="请输入项目描述"
              rows="3"
            ></textarea>
          </div>

          <div class="form-group">
            <label>所属项目</label>
            <div class="project-select-group">
              <el-select v-model="form.project" class="glass-select" placeholder="请选择项目" required>
                <el-option value="" label="请选择项目" />
                <el-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
                  <div class="project-option">
                    <span class="project-name">{{ project.name }}</span>
                    <button
                      type="button"
                      @click.stop="deleteProject(project.id)"
                      class="delete-project-btn"
                      title="删除项目"
                    >
                      <i class="fa fa-times"></i>
                    </button>
                  </div>
                </el-option>
              </el-select>
              <button type="button" @click="showCreateProject = true" class="glass-button add-project-btn">
                <i class="fa fa-plus"></i>
                新建
              </button>
            </div>

            <!-- 创建新项目输入框 -->
            <div v-if="showCreateProject" class="create-project-section">
              <div class="form-group">
                <label>新项目名称</label>
                <input
                  v-model="newProjectName"
                  type="text"
                  class="glass-input"
                  placeholder="请输入新项目名称"
                />
              </div>
              <div class="form-actions">
                <button type="button" @click="cancelCreateProject" class="glass-button">
                  取消
                </button>
                <button type="button" @click="createNewProject" class="glass-button primary">
                  <i class="fa fa-save"></i>
                  创建项目
                </button>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>所属环境</label>
            <el-select v-model="form.environment" class="glass-select" placeholder="请选择环境" required>
              <el-option value="" label="请选择环境" />
              <el-option v-for="env in environments" :key="env.id" :value="env.id" :label="env.name" />
            </el-select>
          </div>

          <div class="form-group">
            <label>GitLab服务器</label>
            <el-select v-model="form.gitlab_server_id" class="glass-select" placeholder="请选择GitLab服务器" required>
              <el-option value="" label="请选择GitLab服务器" />
              <el-option v-for="server in gitlabServers" :key="server.id" :value="server.id" :label="server.name" />
            </el-select>
          </div>

          <div class="form-group">
            <label>可见性</label>
            <el-select v-model="form.visibility" class="glass-select" placeholder="请选择可见性" required>
              <el-option value="private" label="私有" />
              <el-option value="internal" label="内部" />
              <el-option value="public" label="公开" />
            </el-select>
          </div>

          <div class="form-actions">
            <button type="button" class="glass-button" @click="closeModal">
              取消
            </button>
            <button type="submit" class="glass-button primary" :disabled="saving">
              <i class="fa fa-save"></i>
              {{ saving ? '保存中...' : '保存' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 仓库地址弹窗 -->
    <div v-if="repoUrlsVisible" class="modal-overlay" @click="closeRepoUrls">
      <div class="modal-content glass-container repo-urls-modal" @click.stop>
        <div class="modal-header">
          <h3>
            <i class="fa fa-git"></i>
            仓库地址 - {{ selectedRepo?.name }}
          </h3>
          <button class="close-btn" @click="closeRepoUrls">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="repo-urls-content">
          <div class="url-section">
            <label>HTTPS</label>
            <div class="url-input-group">
              <input
                :value="selectedRepo?.http_url_to_repo"
                readonly
                class="glass-input url-input"
              />
              <button
                @click="copyToClipboard(selectedRepo?.http_url_to_repo || '', 'HTTPS')"
                class="glass-button copy-btn"
                :disabled="!selectedRepo?.http_url_to_repo"
              >
                <i class="fa fa-copy"></i>
                复制
              </button>
            </div>
          </div>

          <div class="url-section">
            <label>SSH</label>
            <div class="url-input-group">
              <input
                :value="selectedRepo?.ssh_url_to_repo"
                readonly
                class="glass-input url-input"
              />
              <button
                @click="copyToClipboard(selectedRepo?.ssh_url_to_repo || '', 'SSH')"
                class="glass-button copy-btn"
                :disabled="!selectedRepo?.ssh_url_to_repo"
              >
                <i class="fa fa-copy"></i>
                复制
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分支和标签弹窗 -->
    <div v-if="branchesVisible" class="modal-overlay" @click="closeBranches">
      <div class="modal-content glass-container branches-modal" @click.stop>
        <div class="modal-header">
          <h3>
            <i class="fa fa-code-fork"></i>
            分支和标签 - {{ selectedRepo?.name }}
          </h3>
          <button class="close-btn" @click="closeBranches">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div class="branches-content">
          <div class="tabs-container">
            <div class="tab-buttons">
              <button
                :class="['tab-btn', { active: activeTab === 'branches' }]"
                @click="activeTab = 'branches'"
              >
                <i class="fa fa-code-fork"></i>
                分支 ({{ branches.length }})
              </button>
              <button
                :class="['tab-btn', { active: activeTab === 'tags' }]"
                @click="activeTab = 'tags'"
              >
                <i class="fa fa-tag"></i>
                标签 ({{ tags.length }})
              </button>
            </div>

            <div class="tab-content">
              <!-- 分支列表 -->
              <div v-if="activeTab === 'branches'" class="branch-list">
                <div v-if="loadingBranches" class="loading-state">
                  <i class="fa fa-spinner fa-spin"></i>
                  加载分支中...
                </div>
                <div v-else-if="branches.length === 0" class="empty-state">
                  <i class="fa fa-code-fork"></i>
                  暂无分支
                </div>
                <div v-else>
                  <div
                    v-for="branch in branches"
                    :key="branch.name"
                    class="branch-item"
                  >
                    <div class="branch-info">
                      <div class="branch-name">
                        <i class="fa fa-code-fork"></i>
                        {{ branch.name }}
                        <span v-if="branch.default" class="default-badge">默认</span>
                      </div>
                      <div class="branch-commit">
                        <span class="commit-sha">{{ branch.commit?.short_id }}</span>
                        <span class="commit-message">{{ branch.commit?.title }}</span>
                      </div>
                    </div>
                    <div class="branch-actions">
                      <span class="commit-time">{{ formatTime(branch.commit?.committed_date) }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 标签列表 -->
              <div v-if="activeTab === 'tags'" class="tag-list">
                <div v-if="loadingTags" class="loading-state">
                  <i class="fa fa-spinner fa-spin"></i>
                  加载标签中...
                </div>
                <div v-else-if="tags.length === 0" class="empty-state">
                  <i class="fa fa-tag"></i>
                  暂无标签
                </div>
                <div v-else>
                  <div
                    v-for="tag in tags"
                    :key="tag.name"
                    class="tag-item"
                  >
                    <div class="tag-info">
                      <div class="tag-name">
                        <i class="fa fa-tag"></i>
                        {{ tag.name }}
                      </div>
                      <div class="tag-commit">
                        <span class="commit-sha">{{ tag.commit?.short_id }}</span>
                        <span class="commit-message">{{ tag.commit?.title || tag.message }}</span>
                      </div>
                    </div>
                    <div class="tag-actions">
                      <span class="commit-time">{{ formatTime(tag.commit?.committed_date) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 创建GitLab项目弹窗 -->
  <div v-if="createProjectVisible" class="modal-overlay" @click="cancelCreateGitlabProject">
    <div class="modal-container glass-effect" @click.stop>
      <div class="modal-header">
        <h3>创建GitLab项目</h3>
        <button @click="cancelCreateGitlabProject" class="close-btn">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="modal-body">
        <div class="form-group">
          <label>项目名称</label>
          <input
            v-model="newGitlabProjectName"
            type="text"
            placeholder="请输入要在GitLab上创建的项目名称"
            class="glass-input"
            @keyup.enter="createGitlabProject"
          />
          <div class="input-hint">
            项目名称只能包含字母、数字、横线、下划线和空格
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button @click="cancelCreateGitlabProject" class="glass-button cancel-btn">
          取消
        </button>
        <button @click="createGitlabProject" class="glass-button confirm-btn" :disabled="syncing">
          <i v-if="syncing" class="fa fa-spinner fa-spin"></i>
          {{ syncing ? '创建中...' : '创建' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { environmentApi, gitlabProjectApi, gitlabServerApi, projectApi } from '@/api/gitlab'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, ref } from 'vue'

// 响应式数据
const repos = ref([])
const projects = ref([])
const environments = ref([])
const gitlabServers = ref([])
const selectedProject = ref('')
const selectedEnvironment = ref('')
const selectedServer = ref('')
const searchText = ref('')
const modalVisible = ref(false)
const isEdit = ref(false)
const saving = ref(false)
const loading = ref(false)
const syncing = ref(false)
const repoUrlsVisible = ref(false)
const selectedRepo = ref(null)
const branchesVisible = ref(false)
const activeTab = ref('branches')
const branches = ref([])
const tags = ref([])
const loadingBranches = ref(false)
const loadingTags = ref(false)
const showCreateProject = ref(false)
const newProjectName = ref('')
const createProjectVisible = ref(false)
const newGitlabProjectName = ref('')

const form = ref({
  id: null,
  name: '',
  description: '',
  project: '',
  environment: '',
  gitlab_server: '',
  visibility: 'private'
})

// 计算属性
const filteredRepos = computed(() => {
  let filtered = repos.value

  if (selectedProject.value) {
    filtered = filtered.filter(repo => repo.project == selectedProject.value)
  }

  if (selectedEnvironment.value) {
    filtered = filtered.filter(repo => repo.environment == selectedEnvironment.value)
  }

  if (selectedServer.value) {
    filtered = filtered.filter(repo => repo.gitlab_server == selectedServer.value)
  }

  if (searchText.value.trim()) {
    const query = searchText.value.toLowerCase()
    filtered = filtered.filter(repo =>
      repo.name.toLowerCase().includes(query) ||
      repo.path_with_namespace.toLowerCase().includes(query) ||
      repo.description?.toLowerCase().includes(query)
    )
  }

  return filtered
})

// 方法
const showCreateModal = () => {
  isEdit.value = false
  form.value = {
    id: null,
    name: '',
    description: '',
    project_id: '',
    environment_id: '',
    gitlab_server_id: '',
    visibility: 'private'
  }
  modalVisible.value = true
}

const editProject = (repo: any) => {
  isEdit.value = true
  form.value = {
    id: repo.id,
    name: repo.name,
    description: repo.description || '',
    project: repo.project || '',
    environment: repo.environment || '',
    gitlab_server_id: repo.gitlab_server || '',
    visibility: repo.visibility || 'private'
  }
  modalVisible.value = true
}

const closeModal = () => {
  modalVisible.value = false
}

const saveProject = async () => {
  saving.value = true
  try {
    if (isEdit.value) {
      // 更新GitLab项目 - 只更新可编辑的字段
      const updateData = {
        project: form.value.project,
        environment: form.value.environment,
        visibility: form.value.visibility
      }
      const response = await gitlabProjectApi.updateProject(form.value.id, updateData)

      if (response.data) {
        ElMessage.success('项目更新成功')
        closeModal()
        loadRepos()
      }
    } else {
      // 创建新的GitLab项目
      const response = await gitlabProjectApi.createProject(form.value)

      if (response.data) {
        ElMessage.success('项目创建成功')
        closeModal()
        loadRepos()
      }
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

const refreshProjects = async () => {
  if (!selectedServer.value) {
    ElMessage.warning('请先选择GitLab服务器')
    return
  }

  loading.value = true
  try {
    // 从GitLab同步项目
    const response = await gitlabServerApi.syncProjects(selectedServer.value)

    if (response.data?.success) {
      ElMessage.success(`刷新成功: ${response.data.message}`)
      // 清空分支标签缓存
      clearBranchTagCache()
      // 重新加载项目列表
      await loadRepos()
    } else {
      throw new Error(response.data?.message || '刷新失败')
    }
  } catch (error) {
    console.error('刷新失败:', error)
    ElMessage.error(`刷新失败: ${error.message || '未知错误'}`)
  } finally {
    loading.value = false
  }
}

const syncProjects = async () => {
  if (!selectedServer.value) {
    ElMessage.warning('请先选择GitLab服务器')
    return
  }

  // 显示自定义创建项目弹窗
  createProjectVisible.value = true
}

// 创建GitLab项目
const createGitlabProject = async () => {
  if (!newGitlabProjectName.value.trim()) {
    ElMessage.warning('项目名称不能为空')
    return
  }

  // 验证项目名称格式
  const namePattern = /^[a-zA-Z0-9\-_\s]+$/
  if (!namePattern.test(newGitlabProjectName.value.trim())) {
    ElMessage.error('项目名称只能包含字母、数字、横线、下划线和空格')
    return
  }

  syncing.value = true
  try {
    // 在GitLab上创建项目
    const response = await gitlabServerApi.createGitlabProject(selectedServer.value, {
      name: newGitlabProjectName.value.trim(),
      description: `通过DevOps平台创建的项目: ${newGitlabProjectName.value.trim()}`,
      visibility: 'private'
    })

    if (response.data?.success) {
      ElMessage.success(`项目创建成功: ${response.data.message}`)
      // 关闭弹窗
      createProjectVisible.value = false
      newGitlabProjectName.value = ''
      // 创建成功后刷新项目列表
      await refreshProjects()
    } else {
      throw new Error(response.data?.message || '创建失败')
    }
  } catch (error) {
    console.error('创建项目失败:', error)
    ElMessage.error(`创建项目失败: ${error.message || '未知错误'}`)
  } finally {
    syncing.value = false
  }
}

// 取消创建GitLab项目
const cancelCreateGitlabProject = () => {
  createProjectVisible.value = false
  newGitlabProjectName.value = ''
}

// 清空分支标签缓存
const clearBranchTagCache = () => {
  branches.value = []
  tags.value = []
  if (branchesVisible.value) {
    // 如果分支标签弹窗正在显示，重新加载数据
    const currentRepo = selectedRepo.value
    if (currentRepo) {
      loadBranches(currentRepo)
      loadTags(currentRepo)
    }
  }
}

const exportProjects = () => {
  // TODO: 导出项目
  console.log('导出项目')
}

const viewCommits = (repo: any) => {
  // 打开GitLab项目的提交历史页面
  if (repo.web_url) {
    const commitsUrl = `${repo.web_url}/-/commits/${repo.default_branch || 'main'}`
    window.open(commitsUrl, '_blank')
  } else {
    ElMessage.warning('项目仓库地址不可用')
  }
}

// 显示分支和标签弹窗
const showBranchesAndTags = async (repo: any) => {
  selectedRepo.value = repo
  branchesVisible.value = true
  activeTab.value = 'branches'

  // 清空之前的数据
  branches.value = []
  tags.value = []

  // 加载分支和标签数据
  await loadBranches(repo)
  await loadTags(repo)
}

// 加载分支数据
const loadBranches = async (repo: any) => {
  if (!repo.gitlab_server || !repo.gitlab_id) {
    ElMessage.warning('项目信息不完整')
    return
  }

  loadingBranches.value = true
  try {
    const { default: request } = await import('@/utils/request')
    const response = await request({
      url: `/api/gitlab/gitlab-servers/${repo.gitlab_server}/projects/${repo.gitlab_id}/branches/`,
      method: 'get'
    })

    const data = response.data
    branches.value = data.results || data
  } catch (error) {
    console.error('加载分支失败:', error)
    ElMessage.error('加载分支失败')
  } finally {
    loadingBranches.value = false
  }
}

// 加载标签数据
const loadTags = async (repo: any) => {
  if (!repo.gitlab_server || !repo.gitlab_id) {
    return
  }

  loadingTags.value = true
  try {
    const { default: request } = await import('@/utils/request')
    const response = await request({
      url: `/api/gitlab/gitlab-servers/${repo.gitlab_server}/projects/${repo.gitlab_id}/tags/`,
      method: 'get'
    })

    const data = response.data
    tags.value = data.results || data
  } catch (error) {
    console.error('加载标签失败:', error)
    ElMessage.error('加载标签失败')
  } finally {
    loadingTags.value = false
  }
}

// 关闭分支标签弹窗
const closeBranches = () => {
  branchesVisible.value = false
  selectedRepo.value = null
  branches.value = []
  tags.value = []
}

const onProjectChange = () => {
  // 项目变化时的处理
  console.log('项目变化:', selectedProject.value)
}

const onEnvironmentChange = () => {
  // 环境变化时的处理
  console.log('环境变化:', selectedEnvironment.value)
}

const onServerChange = () => {
  // 服务器变化时的处理
  console.log('服务器变化:', selectedServer.value)
}

// 查看仓库（直接打开GitLab项目页面）
const viewRepository = (repo: any) => {
  if (repo.web_url) {
    window.open(repo.web_url, '_blank')
  } else {
    ElMessage.warning('项目仓库地址不可用')
  }
}

// 显示仓库地址弹窗
const showRepoUrls = (repo: any) => {
  selectedRepo.value = repo
  repoUrlsVisible.value = true
}

// 关闭仓库地址弹窗
const closeRepoUrls = () => {
  repoUrlsVisible.value = false
  selectedRepo.value = null
}

// 复制到剪贴板
const copyToClipboard = async (text: string, type: string) => {
  if (!text) {
    ElMessage.warning('没有可复制的内容')
    return
  }

  try {
    // 优先使用现代的 Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(text)
      ElMessage.success(`${type} 地址已复制到剪贴板`)
    } else {
      // 降级到传统方法
      const textArea = document.createElement('textarea')
      textArea.value = text
      textArea.style.position = 'fixed'
      textArea.style.left = '-999999px'
      textArea.style.top = '-999999px'
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()

      const successful = document.execCommand('copy')
      document.body.removeChild(textArea)

      if (successful) {
        ElMessage.success(`${type} 地址已复制到剪贴板`)
      } else {
        throw new Error('复制命令执行失败')
      }
    }
  } catch (err) {
    console.error('复制失败:', err)
    ElMessage.error(`复制失败: ${err.message || '请手动复制'}`)

    // 选中文本让用户手动复制
    try {
      const input = document.querySelector('.url-input:focus') as HTMLInputElement
      if (input) {
        input.select()
      }
    } catch (selectErr) {
      console.error('选中文本失败:', selectErr)
    }
  }
}

// 创建新项目
const createNewProject = async () => {
  if (!newProjectName.value.trim()) {
    ElMessage.warning('请输入项目名称')
    return
  }

  try {
    const response = await projectApi.createProject({
      name: newProjectName.value.trim(),
      code: newProjectName.value.trim().toLowerCase().replace(/\s+/g, '_'),
      description: `GitLab项目: ${newProjectName.value.trim()}`
    })

    if (response.data) {
      // 添加到项目列表
      projects.value.push(response.data)
      // 选中新创建的项目
      form.value.project = response.data.id
      // 重置状态
      showCreateProject.value = false
      newProjectName.value = ''
      ElMessage.success('项目创建成功')
    }
  } catch (error) {
    console.error('创建项目失败:', error)
    ElMessage.error('创建项目失败')
  }
}

// 取消创建项目
const cancelCreateProject = () => {
  showCreateProject.value = false
  newProjectName.value = ''
}

// 删除项目
const deleteProject = async (projectId: number) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个项目吗？删除后无法恢复！',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    await projectApi.deleteProject(projectId)

    // 从列表中移除
    projects.value = projects.value.filter(p => p.id !== projectId)

    // 如果当前选中的项目被删除，清空选择
    if (form.value.project === projectId) {
      form.value.project = ''
    }

    ElMessage.success('项目删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除项目失败:', error)
      ElMessage.error('删除项目失败')
    }
  }
}

const getEnvClass = (envCode: string) => {
  const envClasses = {
    'dev': 'env-dev',
    'test': 'env-test',
    'uat': 'env-uat',
    'prod': 'env-prod'
  }
  return envClasses[envCode] || 'env-default'
}

const getEnvType = (envCode: string) => {
  const envTypes = {
    'dev': 'success',
    'test': 'warning',
    'uat': 'info',
    'prod': 'danger'
  }
  return envTypes[envCode] || 'info'
}

const getEnvTypeByName = (envName: string) => {
  const envNameTypes = {
    '开发环境': 'success',
    '测试环境': 'warning',
    '预发布环境': 'info',
    '生产环境': 'danger'
  }
  return envNameTypes[envName] || 'info'
}

const getVisibilityText = (visibility: string) => {
  const visibilityMap = {
    'private': '私有',
    'internal': '内部',
    'public': '公开'
  }
  return visibilityMap[visibility] || visibility
}

const formatTime = (time: string) => {
  if (!time) return '从未'
  return new Date(time).toLocaleString('zh-CN')
}

const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString('zh-CN')
}

const loadRepos = async () => {
  try {
    const response = await gitlabProjectApi.getProjects()
    repos.value = response.data.results || []
  } catch (error) {
    console.error('加载仓库列表失败:', error)
    ElMessage.error('加载仓库列表失败')
  }
}

const loadProjects = async () => {
  try {
    const response = await projectApi.getProjects()
    projects.value = response.data.results || []
  } catch (error) {
    console.error('加载项目列表失败:', error)
    ElMessage.error('加载项目列表失败')
  }
}

const loadEnvironments = async () => {
  try {
    const response = await environmentApi.getEnvironments()
    environments.value = response.data.results || []
  } catch (error) {
    console.error('加载环境列表失败:', error)
    ElMessage.error('加载环境列表失败')
  }
}

const loadGitLabServers = async () => {
  try {
    const response = await gitlabServerApi.getServers()
    gitlabServers.value = response.data.results || []
  } catch (error) {
    console.error('加载GitLab服务器列表失败:', error)
    ElMessage.error('加载GitLab服务器列表失败')
  }
}

// 生命周期
onMounted(() => {
  loadRepos()
  loadProjects()
  loadEnvironments()
  loadGitLabServers()
})
</script>

<style scoped>
/* 使用与Zabbix管理页面完全相同的样式 */
.ansible-audit-container {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  z-index: -1;
}

.starry-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.4), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.glass-container {
  background: rgba(164, 244, 186, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.project-env-selector {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.selector-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.selector-group label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.glass-select .el-select__wrapper {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.glass-select .el-select__placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.glass-select .el-input__inner {
  color: #ffffff;
  background: transparent !important;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.project-card {
  background: rgba(164, 244, 186, 0.05);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border-color: rgba(164, 244, 186, 0.4);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.project-name {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.project-path {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
  font-family: monospace;
}

.project-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.project-badge {
  background: rgba(164, 244, 186, 0.2);
  color: #a4f4ba;
  border: 1px solid rgba(164, 244, 186, 0.3);
}

.env-badge {
  border: 1px solid;
}

.env-dev {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.3);
}

.env-test {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

.env-uat {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.3);
}

.env-prod {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.env-default {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
  border-color: rgba(156, 163, 175, 0.3);
}

.project-details {
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.detail-row .label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.detail-row .value {
  color: #fff;
  font-size: 14px;
}

.project-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.glass-button {
  background: rgba(164, 244, 186, 0.15);
  border: 1px solid rgba(164, 244, 186, 0.4);
  border-radius: 8px;
  color: #a4f4ba;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(164, 244, 186, 0.1);
  position: relative;
  z-index: 1;
}

.glass-button:hover {
  background: rgba(164, 244, 186, 0.25);
  border-color: rgba(164, 244, 186, 0.6);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(164, 244, 186, 0.2);
}

.glass-button.primary {
  background: rgba(164, 244, 186, 0.25);
  border-color: rgba(164, 244, 186, 0.6);
  color: #fff;
  box-shadow: 0 4px 15px rgba(164, 244, 186, 0.2);
}

.glass-button.small {
  padding: 4px 8px;
  font-size: 12px;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.7);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  color: #fff;
  margin-bottom: 8px;
}

.empty-state p {
  margin-bottom: 24px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.modal-header h3 {
  color: #fff;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}

.close-btn:hover {
  color: #fff;
}

.project-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.glass-input {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.3);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
  resize: vertical;
}

.glass-input:focus {
  outline: none;
  border-color: rgba(164, 244, 186, 0.5);
  background: rgba(164, 244, 186, 0.15);
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section h1 {
  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.title-section h1 i {
  color: #a4f4ba;
  margin-right: 12px;
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #a4f4ba;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-filters {
  margin-bottom: 30px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
}

.toolbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.toolbar-right {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-group {
  min-width: 200px;
}

.filter-group {
  min-width: 150px;
}

/* 原生表单样式 - 超透明效果 */
.glass-input {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #fff !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}

.glass-input:focus {
  outline: none !important;
  border-color: rgba(164, 244, 186, 0.5) !important;
  background: rgba(164, 244, 186, 0.15) !important;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 删除重复的样式，使用上面的统一样式 */

.audit-table-section {
  padding: 30px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title i {
  color: #a4f4ba;
}

.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.config-name i {
  color: #00eaff;
}

.time-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* 工具栏按钮样式 - 完全照抄Zabbix页面 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  &.sync-button {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
    }

    i {
      color: #3b82f6 !important;
    }
  }

  &.add-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    }

    i {
      color: #22c55e !important;
    }
  }

  &.import-button {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(6, 182, 212, 0.3) !important;
      border-color: rgba(6, 182, 212, 0.6) !important;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
    }

    i {
      color: #06b6d4 !important;
    }
  }

  &.delete-button {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(239, 68, 68, 0.3) !important;
      border-color: rgba(239, 68, 68, 0.6) !important;
      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
    }

    i {
      color: #ef4444 !important;
    }
  }
}

/* 表格样式 */
:deep(.audit-table) {
  background: transparent !important;

  .el-table__header {
    background: rgba(164, 244, 186, 0.1) !important;
  }

  .el-table__header th {
    background: transparent !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
  }

  .el-table__body tr {
    background: transparent !important;

    &:hover {
      background: rgba(164, 244, 186, 0.05) !important;
    }
  }

  .el-table__body td {
    border-bottom: 1px solid rgba(164, 244, 186, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

/* Element Plus 选择器样式覆盖 - 使用超透明样式 */
:deep(.el-select) {
  .el-input__wrapper {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .el-input__inner {
    background: transparent !important;
    color: #fff !important;
  }

  &:hover .el-input__wrapper {
    border-color: rgba(164, 244, 186, 0.5) !important;
  }

  &.is-focused .el-input__wrapper {
    border-color: rgba(164, 244, 186, 0.5) !important;
    background: rgba(164, 244, 186, 0.15) !important;
  }
}

:deep(.el-input) {
  .el-input__wrapper {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .el-input__inner {
    background: transparent !important;
    color: #fff !important;
  }

  &:hover .el-input__wrapper {
    border-color: rgba(164, 244, 186, 0.5) !important;
  }

  &.is-focus .el-input__wrapper {
    border-color: rgba(164, 244, 186, 0.5) !important;
    background: rgba(164, 244, 186, 0.15) !important;
  }
}

:deep(.el-select-dropdown) {
  background: rgba(20, 20, 20, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-select-dropdown__item) {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(164, 244, 186, 0.15) !important;
    color: #a4f4ba !important;
  }

  &.selected {
    background: rgba(164, 244, 186, 0.25) !important;
    color: #a4f4ba !important;
    font-weight: bold !important;
  }

  &.is-disabled {
    color: rgba(255, 255, 255, 0.3) !important;
  }
}

/* 仓库链接样式 */
.repo-link {
  color: rgba(164, 244, 186, 0.9);
  text-decoration: none;
  font-size: 12px;

  &:hover {
    color: rgba(164, 244, 186, 1);
    text-decoration: underline;
  }

  i {
    margin-right: 4px;
  }
}

/* 表格容器滚动样式 */
.audit-table-section {
  overflow-x: auto;
  overflow-y: visible;
  min-width: 0;
  width: 100%;
  padding-right: 20px; /* 给右侧按钮留出足够空间 */
  margin-right: -20px; /* 抵消padding对容器宽度的影响 */
}

/* 确保表格在小屏幕时正常滚动 */
.audit-table-section .el-table {
  width: 100% !important;
  margin-right: 0 !important;
}

/* 表格样式 */
:deep(.el-table) {
  min-width: 1300px; /* 确保表格有最小宽度，小屏幕时会出现滚动条 */
  border: none !important;
}

/* 修复表格单元格样式，防止按钮被遮挡 */
:deep(.el-table .el-table__cell) {
  padding: 12px 8px !important;
  vertical-align: middle !important;
  overflow: visible !important;
  border: none !important;
}

/* 操作列单元格特殊处理 - 给足够的右边距 */
:deep(.el-table .el-table__cell:last-child) {
  padding: 8px 24px 8px 8px !important;
  overflow: visible !important;
  border: none !important;
  position: relative !important;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 4px 0;
  min-height: 40px;
  justify-content: flex-start;
  width: 100%;
  overflow: visible;
}

.action-buttons .glass-button {
  padding: 6px 10px !important;
  font-size: 12px;
  white-space: nowrap;
  width: auto !important;
  flex-shrink: 0;
  height: 32px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}



/* 仓库地址弹窗样式 */
.repo-urls-modal {
  width: 600px;
  max-width: 90vw;
}

.repo-urls-content {
  padding: 20px 0;
}

.url-section {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
    font-size: 14px;
  }
}

.url-input-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.url-input {
  flex: 1;
  padding: 12px 16px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: rgba(30, 30, 30, 0.8) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9) !important;

  &:focus {
    border-color: rgba(164, 244, 186, 0.6) !important;
    background: rgba(164, 244, 186, 0.1) !important;
  }
}

.copy-btn {
  padding: 12px 20px !important;
  white-space: nowrap;

  &:hover:not(:disabled) {
    background: rgba(164, 244, 186, 0.2) !important;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(60, 60, 60, 0.5) !important;
  }
}

/* 分支和标签弹窗样式 */
.branches-modal {
  width: 800px;
  max-width: 95vw;
  max-height: 80vh;
}

.branches-content {
  padding: 20px 0;
  max-height: 60vh;
  overflow: hidden;
}

.tabs-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-buttons {
  display: flex;
  border-bottom: 1px solid rgba(164, 244, 186, 0.3);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;

  &.active {
    color: #a4f4ba;
    border-bottom-color: #a4f4ba;
  }

  &:hover {
    color: rgba(164, 244, 186, 0.9);
  }

  i {
    margin-right: 8px;
  }
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  max-height: 50vh;
}

.branch-list, .tag-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branch-item, .tag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba(164, 244, 186, 0.4);
    background: rgba(164, 244, 186, 0.05);
  }
}

.branch-info, .tag-info {
  flex: 1;
}

.branch-name, .tag-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;

  i {
    color: #a4f4ba;
  }
}

.default-badge {
  background: rgba(164, 244, 186, 0.2);
  color: #a4f4ba;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: normal;
}

.branch-commit, .tag-commit {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.commit-sha {
  font-family: 'Courier New', monospace;
  background: rgba(164, 244, 186, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: #a4f4ba;
}

.commit-message {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-actions, .tag-actions {
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.commit-time {
  white-space: nowrap;
}

.loading-state, .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);

  i {
    font-size: 24px;
    margin-bottom: 12px;
    display: block;
    color: #a4f4ba;
  }
}

/* 创建项目相关样式 */
.project-select-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.project-select-group .glass-select {
  flex: 1;
}

.add-project-btn {
  padding: 8px 16px !important;
  white-space: nowrap;

  &:hover {
    background: rgba(164, 244, 186, 0.2) !important;
  }
}

/* 项目选项样式 */
.project-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 4px;
}

.project-name {
  flex: 1;
  text-align: left;
}

.delete-project-btn {
  background: none;
  border: none;
  color: #ff4757;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
  opacity: 0.7;
  transition: all 0.2s ease;

  &:hover {
    opacity: 1;
    background: rgba(255, 71, 87, 0.1);
  }
}

.create-project-section {
  margin-top: 16px;
  padding: 16px;
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(164, 244, 186, 0.3);
  border-radius: 8px;

  .form-group {
    margin-bottom: 12px;
  }

  .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
  }
}

/* 创建GitLab项目弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-container {
  background: rgba(164, 244, 186, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(164, 244, 186, 0.3);
  border-radius: 12px;
  width: 500px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2);

  h3 {
    margin: 0;
    color: #a4f4ba;
    font-size: 18px;
    font-weight: 600;
  }

  .close-btn {
    background: none;
    border: none;
    color: #a4f4ba;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(164, 244, 186, 0.1);
    }
  }
}

.modal-body {
  padding: 24px;

  .form-group {
    margin-bottom: 0;

    label {
      display: block;
      margin-bottom: 8px;
      color: #a4f4ba;
      font-weight: 500;
    }

    .glass-input {
      width: 100%;
      padding: 12px 16px;
      background: rgba(164, 244, 186, 0.1);
      border: 1px solid rgba(164, 244, 186, 0.3);
      border-radius: 8px;
      color: #a4f4ba;
      font-size: 14px;
      backdrop-filter: blur(10px);
      transition: all 0.2s ease;

      &::placeholder {
        color: rgba(164, 244, 186, 0.6);
      }

      &:focus {
        outline: none;
        border-color: #a4f4ba;
        background: rgba(164, 244, 186, 0.15);
      }
    }

    .input-hint {
      margin-top: 6px;
      font-size: 12px;
      color: rgba(164, 244, 186, 0.7);
    }
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid rgba(164, 244, 186, 0.2);

  .glass-button {
    padding: 10px 20px;
    border: 1px solid rgba(164, 244, 186, 0.3);
    border-radius: 6px;
    background: rgba(164, 244, 186, 0.1);
    color: #a4f4ba;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;

    &:hover:not(:disabled) {
      background: rgba(164, 244, 186, 0.2);
      border-color: #a4f4ba;
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    &.confirm-btn {
      background: rgba(164, 244, 186, 0.2);
      border-color: #a4f4ba;

      &:hover:not(:disabled) {
        background: rgba(164, 244, 186, 0.3);
      }
    }

    i {
      margin-right: 6px;
    }
  }
}
</style>
